<!--
 * @Author: your name
 * @Date: 2020-01-27 17:43:51
 * @LastEditTime: 2020-05-17 08:05:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\dashboard\admin\index.vue
 -->
<template>
  <!-- <div class="container" :style="{height:this.tabHeight,color:'red'}"> -->
  <div class="container" :style="{height:this.tabHeight}">
    <!-- <div class="info">
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </div>
    <baidu-map class="map" :center="center" :zoom="zoom"></baidu-map>-->
    <panel-group :mainData="mainData" />

    <el-row v-if="checkPermission(['admin'])">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>未完成检查{{this.$store.getters.roles}}</span>
            <span style="float:right">
              <router-link :to="'/check/table/list'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>

            <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>

            <el-table-column min-width="100px" align="center" label="隐患级别">
              <template slot-scope="{row}">{{row.dangerLevel|levelFilter}}</template>
            </el-table-column>

            <!-- <el-table-column min-width="100px" align="center" label="整改类型">
              <template slot-scope="{row}">{{row.dangerRecitfyType|typeFilter}}</template>
            </el-table-column>-->
            <el-table-column min-width="100px" align="center" label="隐患状态">
              <template slot-scope="{row}">{{row.dangerState|stateFilter}}</template>
            </el-table-column>

            <el-table-column class-name="status-col" label="发布时间" width="100px" prop="createTime"></el-table-column>
            <!-- <el-table-column
              class-name="status-col"
              label="整改限期"
              width="100px"
              prop="recitfyOverdate"
            ></el-table-column>-->
          </el-table>
          <pagination
            :small="true"
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>已完成检查</span>
            <span style="float:right">
              <router-link :to="'/check/table/list'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>

            <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>

            <el-table-column min-width="100px" align="center" label="隐患级别">
              <template slot-scope="{row}">{{row.dangerLevel|levelFilter}}</template>
            </el-table-column>

            <!-- <el-table-column min-width="100px" align="center" label="整改类型">
              <template slot-scope="{row}">{{row.dangerRecitfyType|typeFilter}}</template>
            </el-table-column>-->
            <el-table-column min-width="100px" align="center" label="隐患状态">
              <template slot-scope="{row}">{{row.dangerState|stateFilter}}</template>
            </el-table-column>

            <el-table-column class-name="status-col" label="发布时间" width="100px" prop="createTime"></el-table-column>
            <!-- <el-table-column
              class-name="status-col"
              label="整改限期"
              width="100px"
              prop="recitfyOverdate"
            ></el-table-column>-->
          </el-table>
          <pagination
            :small="true"
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>未整改隐患</span>
            <span style="float:right" v-if="checkPermission(['admin'])">
              <router-link :to="'/danger/trouble'">更多</router-link>
            </span>
            <span style="float:right" v-if="checkPermission(['safeManager'])">
              <router-link :to="'/enterprise/trouble'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>

            <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>

            <el-table-column min-width="100px" align="center" label="隐患级别">
              <template slot-scope="{row}">{{row.dangerLevel|levelFilter}}</template>
            </el-table-column>

            <!-- <el-table-column min-width="100px" align="center" label="整改类型">
              <template slot-scope="{row}">{{row.dangerRecitfyType|typeFilter}}</template>
            </el-table-column>-->
            <el-table-column min-width="100px" align="center" label="隐患状态">
              <template slot-scope="{row}">{{row.dangerState|stateFilter}}</template>
            </el-table-column>

            <el-table-column class-name="status-col" label="发布时间" width="100px" prop="createTime"></el-table-column>
            <!-- <el-table-column
              class-name="status-col"
              label="整改限期"
              width="100px"
              prop="recitfyOverdate"
            ></el-table-column>-->
          </el-table>
          <pagination
            :small="true"
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>待复查隐患</span>
            <span style="float:right" v-if="checkPermission(['admin'])">
              <router-link :to="'/danger/trouble'">更多</router-link>
            </span>
            <span style="float:right" v-if="checkPermission(['safeManager'])">
              <router-link :to="'/enterprise/trouble'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>

            <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>

            <el-table-column min-width="100px" align="center" label="隐患级别">
              <template slot-scope="{row}">{{row.dangerLevel|levelFilter}}</template>
            </el-table-column>

            <!-- <el-table-column min-width="100px" align="center" label="整改类型">
              <template slot-scope="{row}">{{row.dangerRecitfyType|typeFilter}}</template>
            </el-table-column>-->
            <el-table-column min-width="100px" align="center" label="隐患状态">
              <template slot-scope="{row}">{{row.dangerState|stateFilter}}</template>
            </el-table-column>

            <el-table-column class-name="status-col" label="发布时间" width="100px" prop="createTime"></el-table-column>
            <!-- <el-table-column
              class-name="status-col"
              label="整改限期"
              width="100px"
              prop="recitfyOverdate"
            ></el-table-column>-->
          </el-table>
          <pagination
            :small="true"
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '../components/PanelGroup'
import { fetchList } from '@/api/troubles'
import { getBaseDicInfo } from '@/api/baseApi'
import Pagination from '@/components/Pagination'
import checkPermission from '@/utils/permission'
let that
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    Pagination
  },
  data() {
    return {
      tabHeight: `${document.body.clientHeight - 84}px`,
      center: { lng: 106.51698, lat: 29.506757 }, //baidu地图
      zoom: 15, //baidu地图
      mainData: {
        //一般隐患
        normalTrouble: 120,
        nowRectify: 30,
        limitRectify: 40,
        stopRectify: 20
      },
      troubleGrades: [], //隐患级别
      troubleRectifyTypes: [], //整改类型
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageIndex: 1,
        limit: 10,
        pType: 2
      }
    }
  },
  filters: {
    stateFilter(state) {
      const stateMap = {
        1: '草稿',
        2: '待整改',
        3: '整改中',
        4: '待复查',
        5: '复查不通过',
        6: '已消除'
      }
      return stateMap[state]
    },
    typeFilter(typeId) {
      let result = ''
      that.troubleRectifyTypes.map((type) => {
        if (type.id == typeId) {
          result = type.dictValue
        }
      })
      return result
    },

    levelFilter(levelId) {
      let result = ''
      that.troubleGrades.map((level) => {
        if (level.id == levelId) {
          result = level.dictValue
        }
      })
      return result
    }
  },
  watch: {
    tabHeight(nval, oval) {
      return nval
    }
  },
  beforeCreate: function() {
    that = this
  },
  created() {
    this.getList()
    this.getTroubleGradesList()
    this.getRectifyTypeList()
  },
  mounted() {
    window.addEventListener('resize', this.resizeImage)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeImage)
  },
  methods: {
    checkPermission,
    resizeImage() {
      this.tabHeight = `${document.body.clientHeight - 84}px`
    },
    getTroubleGradesList() {
      getBaseDicInfo({ typeId: 2 }).then((response) => {
        this.troubleGrades = response.data
      })
    },
    getRectifyTypeList() {
      getBaseDicInfo({ typeId: 1 }).then((response) => {
        this.troubleRectifyTypes = response.data
      })
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container /deep/ .el-card__header {
  background: #42b983;
  color: #fff;
}
.map {
  width: 100%;
  height: 100%;
}
.info {
  width: 300px;
  height: 200px;
  background: #fff;
  position: absolute;
  z-index: 99999;
  left: 50px;
  top: 20px;
}
.container {
  position: relative;
  // background-image: url('~@/assets/images/xijinping.jpg');
  // background-size: 100% 100%;
  // height: 653px;
}

.box-card {
  width: 95%;
  margin: 10px;
}
</style>
